<template>
  <div class="fixedOperation" ref="fixedOperation">
    <!--       :style="{ width: 'calc(100% - ' + Swdh + ')' }" -->
    <div
      class="fixedOperation-cnt"
      ref="fixedOperationCnt"
      id="fixedOperationCnt"
      :style="{ width: Swdh }"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script setup name="FixedOperation">
import { getCurrentInstance } from 'vue'
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()
const appStore = useAppStore()
const sidebar = computed(() => useAppStore().sidebar)
const fixedOperation = ref(HTMLElement)
const fixedOperationCnt = ref()
const Swdh = ref(200) // 设置宽度
onMounted(() => {
  console.log(sidebar.value, 'sidebar')
  // 获取slot高度 并赋值  实现组件高度根据slot插槽内容撑开
  fixedOperation.value.style.minHeight =
    document.getElementById('fixedOperationCnt')?.clientHeight + 'px'
})
watch(
  () => sidebar.value,
  val => {
    Swdh.value = !val.opened ? 'calc(100% - 200px)' : 'calc(100% - 54px)'
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.fixedOperation {
  min-height: 50px;
  .fixedOperation-cnt {
    background: #fff;
    box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    @apply px-20px pt-8px pb-8px z-9 fixed;
  }
}
</style>
